<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>Vue.js学习</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
		<script src="js/jquery/jquery-3.2.1.min.js"></script>
	</head>

	<body>
		<div id="components-demo2">
			<button-counter v-for="(item, index) in items" v-bind:key="item.id" v-bind:index="index" v-bind:item="item"></button-counter>
		</div>

		<alert-box>
			Something bad happened.
		</alert-box>
	</body>
	<script type="text/javascript">
		Vue.component('alert-box', {
			template: '<div><span>Error!</span><slot></slot></div>'
		});

		// 定义一个名为 button-counter 的新组件
		Vue.component('button-counter', {
			data: function() {
				return {
					count: 0
				}
			},
			props: ['index', 'item'],
			template: '<div>{{ index }} - {{ item.title }} : <button v-on:click="count++">You clicked me {{ count }} times.</button></div>'
		});

		new Vue({
			el: '#components-demo2',
			data: {
				items: [{
						id: 1,
						title: 'title01'
					},
					{
						id: 2,
						title: 'title02'
					},
					{
						id: 3,
						title: 'title03'
					},
					{
						id: 4,
						title: 'title04'
					}
				]
			}
		});
	</script>

</html>